<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <title>首页</title>
    <link rel="stylesheet" href="../resources/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../resources/css/style.css">
    <style>
        html,body{height: 100%;}
        .shouyewarp{background-color: #f5f5f5;height: 100%;padding: 15px 10px;}
        /*.lunbowarp,.tongzhiwarp{border: 1px solid #e3e3e3;width:49%;height: 300px;float: left;}*/
        .lunbotitle{height: 30px;padding-left: 15px;line-height: 30px;background-color: #eeeeee;}
        #test1 img{width: 100%;height: 100%;}
        #test1{height: 350px!important;}
        /*.tongzhiwarp{margin-left: 20px; }*/
        .teshutubiao{color: #009688;}
        .tongzhititle{height: 30px; line-height: 30px; border-bottom: 1px solid #E3e3e3;background-color: #eeeeee;}
        .tongzhion{padding: 5px 15px 5px 12px; border-bottom: 1px dotted #e4e4e4;}
        .tongzhionL{border: 1px solid #e3e3e3;width: 100px;height: 60px;float: left;margin-right: 10px;padding: 10px
        5px;}
        .tongzhionL img{width: 100%; height: 100%;}
        .tongzhionR h4{font-size: 14px; font-weight: bolder;margin-bottom: 10px;color: #333333;}
        .tongzhionR p{font-size: 12px; color: #999999;}
        .layui-carousel-ind{text-align:right;right: 10px;}
        .layui-carousel-ind li.layui-this{background-color: #009688;}
        .tongzhimain{height: 350px;}
        .layui-carousel-ind ul li:before{content: '';}
        @media screen and (max-width: 750px) {
            .MOVE_title{
                text-align: center;
            }
            .MOVE_biaoti{margin: 0 auto;}
        }
        .mheader{ height: 50px;  line-height: 50px; background-color: #383c48; }
        .mheader h2{
            color: #fff;
            font-size:18px;
            line-height: 50px;
            text-align: center;
            margin: 0 auto;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

    </style>
</head>
<body>
<div class="mheader">
    <h2>首页</h2>
</div>

<div class="shouyewarp">
    <div class="lunbowarp layui-col-xs12 layui-col-sm6 layui-col-md6">
        <div class="lunbotitle">图片新闻</div>
        <div class="layui-carousel" id="test1">
            <div carousel-item>
                <div><img src="../resources/images/lunbo1.jpg" alt="图片加载出错啦"></div>
                <div><img src="../resources/images/lunbo1%20(1)%20(1).jpg" alt="图片加载出错啦"></div>
            </div>
        </div>
    </div>
    <div class="tongzhiwarp layui-col-xs12 layui-col-sm6 layui-col-md6">
        <div class="tongzhititle">
            <span class="teshutubiao"><i class="layui-icon">&#xe645;</i></span>通知公告
        </div>
        <div class="tongzhimain">

            <div class="tongzhion">
                <div class="tongzhionL">
                    <img src="../resources/images/xiao.png" alt="">
                </div>
                <div class="tongzhionR">
                        <h4>关于高层管理人员人事任命的通知</h4>
                        <p>为适应新形势下公司经营发展需要，经董事长、总裁提名研究决定，对总裁提名研究决定，对总裁提名研究决定，对总裁提名研究决定，对以下同志为适应新形势下公司经营发展需要，经董事长、总裁提名研究决定</p>


                </div>
            </div>
            <div class="tongzhion">
                <div class="tongzhionL">
                    <img src="../resources/images/xiao.png" alt="">
                </div>
                <div class="tongzhionR">
                    <h4>关于高层管理人员人事任命的通知</h4>
                    <p>为适应新形势总裁提名研究决定，对总裁提名研究决定，对下公司经营发展需要，经董事长、总裁提名研究决定，对以下同志为适应新形势下公司经营发展需要，经董事长、总裁提名研究决定</p>
                </div>
            </div>
            <div class="tongzhion">
                <div class="tongzhionL">
                    <img src="../resources/images/xiao.png" alt="">
                </div>
                <div class="tongzhionR">
                    <h4>关于高层管理人员人事任命的通知</h4>
                    <p>为适应新形势下总裁提名研究决定，对总裁提名研究决定，对总裁提名研究决定，对公司经营发展需要，经董事长、总裁提名研究决定，对以下同志为适应新形势下公司经营发展需要，经董事长、总裁提名研究决定</p>
                </div>
            </div>

        </div>
    </div>

</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->

<script src="../resources/layui/layui.all.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate','carousel','element'], function(){
        var carousel = layui.carousel;
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,element=layui.element
            ,laydate = layui.laydate;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
            ,interval:3000
        });

        $(document).on('click','.tongzhion',function () {
            location.href='./news-details.html';
        })


        //循环通告栏所有p标签 如果字符串字数大于80个  显示...
        $('.tongzhimain p').each(function () {

            if($(this).html().length>=80){
                var p_html=$(this).html().substring(0,80);
                $(this).html(p_html+'...')
            }
        })

    });
</script>
</body>
</html>